<html>

<head>
    <title>flex示例</title>
    <style>
        body {
            margin: 0;
        }

        section {
            display: flex;
            margin: 5px;
            outline: 1px solid #666;
        }

        section>* {
            background-color: aqua;
            outline: 1px solid rgb(136, 125, 228);
        }

        .section1 {
            /*顺序 row row-reverse column column-reverse*/
            flex-direction: row-reverse;
        }

        .section2 {
            /*主轴位置关系 flex-start flex-end center space-between space-around*/
            justify-content: space-around;
        }

        .section3 {
            min-height: 50px;
            /*辅轴对齐 stretch flex-start flex-end center  注意align-content是针对多行，将子元素作为一个整体处理*/
            align-items: flex-end;
        }

        .section4 {
            min-height: 50px;
        }

        .section4 .cell3 {
            /*边距可控制主轴排布*/
            margin-left: auto;
        }

        .section5 {
            min-height: 50px;
        }

        .section5 .cell3 {
            /*单独项的辅轴对齐*/
            align-self: center;
        }

        .section6 {
            min-height: 50px;
        }

        .section6>* {
            /*只有一个元素时居中处理*/
            margin: auto;
        }

        .section7 {
            /*多元素居中处理*/
            min-height: 100px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .section8,
        .section9 {
            min-height: 100px;
        }

        .section8>* {
            /*如果要均分，可以把flex-basis都设为0，flex-grow都设为1*/
            width: 900px;
            /*主轴原始基础大小*/
            flex-basis: 100px;
            /*剩余空间的分配比例*/
            flex-grow: 1;
        }

        .section8>.cell3 {
            /*剩余假如为500，则会给cell3分200，其它单元格分100*/
            flex-grow: 2;
        }

        .section9>* {
            width: 900px;
            /*简写，顺序为 flex-grow flex-shrink flex-basis, 最后一项必须带单位*/
            flex: 1 0 100px
        }

        .section9>.cell3 {
            flex: 2 0 100px
        }
        .section10{
            width: 50%;
            min-height: 100px;
        }
        .section10 .cell1{
            margin-right: 0.5em;
            flex: 1 0 0em;
        }
        .section10 .cell2{
            flex: 0 0 10em;
        }

        .tags {
            width: 900px;
            border: 1px solid #c9e1f4;
            margin: 5px;
            padding: 1em;
            list-style: none;
        }

        .tags li {
            display: inline-block;
            margin: .5em;
        }

        .tags a {
            position: relative;
            display: block;
            padding: .25em .5em .25em .25em;
            background-color: #c9e1f4;
            color: #28448f;
            border-radius: 0 .25em .25em 0;
            line-height: 1.5;
            text-decoration: none;
            text-align: center;
        }

        .tags a::before {
            position: absolute;
            content: '';
            width: 0;
            height: 0;
            border: 1em solid transparent;
            border-right-width: .5em;
            border-right-color: #c9e1f4;
            left: -1.5em;
            top: 0;
        }

        /*使用flex以后*/
        .tags {
            display: flex;
            flex-wrap: wrap;
            /* flex-direction: row-reverse; */
        }

        .tags li {
            flex: 1 0 auto;
            max-width: 150px;
            min-height: 200px;
        }
    </style>
</head>

<body>
    <section class="section1">
        <div>cell1</div>
        <div>cell2</div>
        <div>cell3</div>
        <div>cell4</div>
    </section>
    <section class="section2">
        <div>cell1</div>
        <div>cell2</div>
        <div>cell3</div>
        <div>cell4</div>
    </section>
    <section class="section3">
        <div>cell</div>
        <div>cell</div>
        <div>cell</div>
        <div>cell</div>
    </section>
    <section class="section4">
        <div>cell</div>
        <div>cell</div>
        <div class="cell3">cell</div>
        <div>cell</div>
    </section>
    <section class="section5">
        <div>cell</div>
        <div>cell</div>
        <div class="cell3">cell</div>
        <div>cell</div>
    </section>
    <section class="section6">
        <div>cell</div>
    </section>
    <section class="section7">
        <div>cell</div>
        <div>cell</div>
    </section>
    <section class="section8">
        <div>cell</div>
        <div>cell</div>
        <div class="cell3">cell</div>
        <div>cell</div>
    </section>
    <section class="section9">
        <div>cell</div>
        <div>cell</div>
        <div class="cell3">cell</div>
        <div>cell</div>
    </section>
    <section class="section10">
        <div class="cell1">cell</div>
        <div class="cell2">cell</div>
    </section>
    <ul class="tags">
        <li><a href="">标签1</a></li>
        <li><a href="">标签2</a></li>
        <li><a href="">标签3</a></li>
        <li><a href="">标签11</a></li>
        <li><a href="">标签22</a></li>
        <li><a href="">标签33</a></li>
        <li><a href="">标签aaa</a></li>
        <li><a href="">标签bbb</a></li>
        <li><a href="">标签ccc</a></li>
        <li><a href="">标签abc</a></li>
        <li><a href="">标签d</a></li>
        <li><a href="">标签ef</a></li>
        <li><a href="">标签ghijk</a></li>
        <li><a href="">标签lmn</a></li>
        <li><a href="">标签o</a></li>
        <li><a href="">标签pqr</a></li>
        <li><a href="">标签s</a></li>
        <li><a href="">标签t</a></li>
        <li><a href="">标签u</a></li>
        <li><a href="">标签v</a></li>
        <li><a href="">标签w</a></li>
        <li><a href="">标签x</a></li>
        <li><a href="">标签y</a></li>
        <li><a href="">标签z</a></li>
        <li><a href="">标签000000</a></li>
    </ul>
</body>

</html>